<style type="text/css">
.sm-st {
    background: #fff;
    padding: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}
.sm-st-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background: #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
    color: #fff;
}
.sm-st-info {
    font-size: 12px;
    padding-top: 2px;
}
.sm-st-info span {
    display: block;
    font-size: 24px;
    font-weight: 600;
}
.orange {
    background: #fa8564 !important;
}
.tar {
    background: #45cf95 !important;
}
.sm-st .green {
    background: #86ba41 !important;
}
.pink {
    background: #AC75F0 !important;
}
.yellow-b {
    background: #fdd752 !important;
}
.stat-elem {
    background-color: #fff;
    padding: 18px;
    border-radius: 40px;
}
.stat-info {
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    margin-top: -5px;
    padding: 8px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    font-style: italic;
}
.stat-icon {
    text-align: center;
    margin-bottom: 5px;
}
.st-red {
    background-color: #F05050;
}
.st-green {
    background-color: #27C24C;
}
.st-violet {
    background-color: #7266ba;
}
.st-blue {
    background-color: #23b7e5;
}
.stats .stat-icon {
    color: #28bb9c;
    display: inline-block;
    font-size: 22px;
    text-align: left;
    vertical-align: middle;
    width: 35px;
    float: left;
}
.stat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.stat .value {
    font-size: 20px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.stat .value .badge {
    color: #fff;
    font-size: 50%;
    background: #e74c3c;
    min-width: 5px;
    font-weight: normal;
    padding: 2px 3px;
}
.stat .name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat.lg .value {
    font-size: 26px;
    line-height: 28px;
}
.stat.lg .name {
    font-size: 16px;
}
.stat-col .progress {
    height: 2px;
}
.stat-col .progress-bar {
    line-height: 2px;
    height: 2px;
}
.item {
    padding: 30px 0;
}
#statistics .panel {
    min-height: 150px;
}
#statistics .panel h5 {
    font-size: 13px;
}
.form-control {
    width: 95%;
}
.small-box .sum_price {
    font-size: 30px;
    font-weight: bold;
}
.small-box .icon {
    font-size: 70px;
    transition: all 0.3s linear 0s;
}
.small-box:hover .icon {
    font-size: 75px;
}
.small-box {
    margin-bottom: 0px;
}
.small-box > .inner {
    padding: 5px;
}
.small-box p {
    margin: 0 0 3.0px;
}
</style>
<form id="reserve-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="pms/pmsroomstatus/reserve_detail">
  <input type="hidden" id="c-id" name="row[id]" value="{$resiModel['id']}">
  <input type="hidden" id="c-room_type_id" name="row[room_type_id]" value="{$resiModel['room_type_id']}">
  <input type="hidden" id="c-room_info_id" name="row[room_info_id]" value="{$resiModel['room_info_id']}">
  <input type="hidden" id="c-total_price" name="row[total_price]" value="{$resiModel['total_price']}">
  <div class="row">
    <div class="col-xs-4"> 
      <!-- small box -->
      <div class="small-box bg-aqua" id="todayBox">
        <div class="inner">
          <div class="sum_price">&yen;<span>{$resiModel['total_price']}</span></div>
          <p>房费总计</p>
        </div>
        <div class="icon"> <i class="fa fa-bed"></i> </div>
        <span class="small-box-footer">
          预定号： {$resiModel['reserve_no']}<br />
          {$resiModel['floor']}楼{$resiModel['room_no']}房【{$resiModel['room_type_name']}】 
        </span> </div>
    </div>
    <div class="col-xs-8">
      <div class="card sameheight-item stats">
        <div class="card-block" style="overflow-y: auto;height:110px;">
          <div id="priceBox" class="row row-sm stats-container" style="width:100%;"> {volist name="$resiModel['price_json_array']" id="item"}
            <div class="col-xs-4 stat-col">
              <div class="stat-icon"><i class="fa fa-bed"></i></div>
              <div class="stat">
                <div class="value">
                  &yen;{$item['price']}
                  {if isset($item['special_price'])}
                    {if $item['special_price'] == 1}
                    <span class="badge" title="特殊日期价格">特</span>
                    {/if}
                  {/if}
                </div>
                <div class="name"> {$item['day']}</div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
              </div>
            </div>
            {/volist} </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="panel-body">
      <div class="col-sm-4">
        <div class="form-group">
          <label>渠道来源:</label>
          <select id="c-source" name="row[source]" class="form-control" disabled="disabled">
            
            {volist name="sourceList" id="item"}
            
            <option value="{$item['name']}" {in name="$item['name']" value="$resiModel['source']" }selected{/in}>
            
            {$item['name']} 
            
            </option>
            
             {/volist} 
          
          </select>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>联系人姓名:</label>
          <div class="input-group">
            <div class="input-group-btn">
              <select class="form-control operate" id="c-sex" name="row[sex]" style="width:60px;" disabled="disabled">
                <option value="1" {in name="1" value="$resiModel['sex']" }selected{/in}>
                
                
                先生 
                
                
                </option>
                <option value="0" {in name="0" value="$resiModel['sex']" }selected{/in}>
                
                
                女士 
                
                
                </option>
              </select>
            </div>
            <input class="form-control" type="text" id="c-realname" name="row[realname]" value="{$resiModel['realname']}" style="width:93%;" readonly>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>证件号码:</label>
          <div class="input-group">
              <div class="input-group-btn">
                  <select class="form-control operate" id="c-certificates_type" name="row[certificates_type]" style="width:80px;" disabled="disabled">
                      {volist name="certificatestypeList" id="item"}
                      <option value="{$item['id']}" {in name="$item['id']" value="$resiModel['certificates_type']" }selected{/in}>{$item['name']}</option>
                      {/volist}
                  </select>
              </div>
              <input type="text" id="c-person_no" name="row[person_no]" class="form-control" value="{$resiModel['person_no']}" readonly style="width:91%;">
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>出生日期:</label>
          <div class="input-group" style="width:95%;">
            <input type="text" id="c-birthday" name="row[birthday]" class="form-control" value="{$resiModel['birthday_text']}" readonly>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>民族:</label>
          <select id="c-nation" name="row[nation]" class="form-control" disabled="disabled">
            <option value="">请选择</option>
            
            
            
                                        {volist name="nationList" id="item"}
                                        
            
            
            <option value="{$item['id']}" {in name="$item['id']" value="$resiModel['nation']" }selected{/in}>
            
            
            {$item['name']} 
            
            
            </option>
            
            
             {/volist} 
          
          
          </select>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>联系电话:</label>
          <input type="text" id="c-tel" name="row[tel]" class="form-control" value="{$resiModel['tel']}" readonly>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group" id="js_addons">
          <label>附件:</label>
          <div class="input-group" style="width: 98%;">
            <input id="c-addons" class="form-control" size="50" name="row[addons]" type="text" value="{$resiModel['addons']}" readonly>
            <div class="input-group-addon no-border no-padding hidden"> <span>
              <button type="button" id="plupload-addons" class="btn btn-danger plupload" data-input-id="c-addons" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-addons"><i class="fa fa-upload"></i> {:__('Upload')}</button>
              </span> </div>
          </div>
          <ul class="row list-inline plupload-preview" id="p-addons">
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>入住时间:</label>
          <input type="text" id="c-check_in_time" name="row[check_in_time]" class="form-control datetimepicker" value="{$resiModel['check_in_time_text']}" readonly>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>退房时间:</label>
          <input type="text" id="c-check_out_time" name="row[check_out_time]" class="form-control datetimepicker" value="{$resiModel['check_out_time_text']}" readonly>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label>住宿天数(夜):</label>
          <input type="number" id="c-days" name="row[days]" class="form-control" value="{$resiModel['days']}" readonly>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <label>备注:</label>
          <textarea id="c-remarks" name="row[remarks]" class="form-control" readonly style="width:100%;">{$resiModel['remarks']}</textarea>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <label>同住客人:</label>
          <br />
          {volist name="$resiModel['customer_data']" id="item"}
          <div class="col-xs-4"> 
            <!-- small box -->
            <div class="small-box {if $item['sex'] == 1}bg-blue{else}bg-red{/if}">
              <div class="inner">
                <p>{$item['realname']} 【{if $item['sex'] == 1}先生{else}女士{/if}】</p>
                <p><i class="fa fa-address-card"></i> {$item['person_no']}</p>
                <p><i class="fa fa-birthday-cake"></i> {$item['birthday']}</p>
                <p><i class="fa fa-phone"></i> {$item['tel']}</p>
              </div>
              <div class="icon"> <i class="fa fa-user"></i> </div>
            </div>
          </div>
          {/volist} </div>
      </div>
    </div>
  </div>
  <div class="form-group layer-footer">
    <div class="col-xs-12 col-sm-12 text-center" id="js_operate-box"> {if $resiModel['reserve_status'] == 0}
      <button type="button" class="btn btn-primary pull-left" data-event="edit-linkman" style="margin-right: 0.5rem;"><i class="fa fa-user"></i> 改联系人</button>
      <button type="button" class="btn btn-primary pull-left" data-event="edit-date" style="margin-right: 0.5rem;"><i class="fa fa-bed"></i> 改入住信息</button>
      <button type="button" class="btn btn-primary pull-left" data-event="edit-addons" style="margin-right: 0.5rem;"><i class="fa fa-cloud-upload"></i> 改附件</button>
      <button type="button" class="btn btn-primary pull-left" data-event="edit-customer" style="margin-right: 0.5rem;"><i class="fa fa-users"></i> 改同住客人</button>
      <button type="button" class="btn btn-danger pull-right" data-event="cancel" style="margin-right: 0.5rem;"><i class="fa fa-trash"></i> 作废预定</button>
      <button type="button" class="btn btn-success pull-right" data-event="go-order" style="margin-right: 0.5rem;"><i class="fa fa-check"></i> 转入订单</button>
      {/if} </div>
  </div>
</form>
<script>
var customer_data = {:json_encode($resiModel['customer_data'])};
</script> 

<!-- editModal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <form id="modal-form" class="form-horizontal" role="modalform" data-toggle="validator" method="POST" action="">
      <input type="hidden" id="m-event">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="editModalLabel">作废预定</h4>
        </div>
        <div class="modal-body">
          <div id="m-edit-linkman">
            <div class="col-sm-4">
              <div class="form-group">
                <label>渠道来源:</label>
                <select id="m-source" class="form-control">
                  
                
                
                            {volist name="sourceList" id="item"}
                            
                
                
                  <option value="{$item['name']}" {in name="$item['name']" value="$resiModel['source']" }selected{/in}>
                  
                
                {$item['name']} 
                
                
                  </option>
                  
                
                 {/volist} 
              
              
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>联系人姓名:</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <select class="form-control operate" id="m-sex" style="width:60px;">
                      <option value="1" {in name="1" value="$resiModel['sex']" }selected{/in}>
                      
                    
                    先生 
                    
                    
                      </option>
                      <option value="0" {in name="0" value="$resiModel['sex']" }selected{/in}>
                      
                    
                    女士 
                    
                    
                      </option>
                    </select>
                  </div>
                  <input class="form-control" type="text" id="m-realname" value="{$resiModel['realname']}" style="width:93%;">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>证件号码:</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <select class="form-control operate" id="m-certificates_type" style="width:80px;">
                            {volist name="certificatestypeList" id="item"}
                            <option value="{$item['id']}" {in name="$item['id']" value="$resiModel['certificates_type']" }selected{/in}>{$item['name']}</option>
                            {/volist}
                        </select>
                    </div>
                    <input type="text" id="m-person_no" class="form-control" value="{$resiModel['person_no']}" style="width:91%;">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>出生日期:</label>
                <div class="input-group" style="width:95%;">
                  <input type="text" id="m-birthday" class="form-control" value="{$resiModel['birthday']}">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>民族:</label>
                <select id="m-nation" class="form-control">
                  <option value="">请选择</option>
                  
                
                
                                            {volist name="nationList" id="item"}
                                            
                
                
                  <option value="{$item['id']}" {in name="$item['id']" value="$resiModel['nation']" }selected{/in}>
                  
                
                {$item['name']} 
                
                
                  </option>
                  
                
                 {/volist} 
              
              
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>联系电话:</label>
                <input type="text" id="m-tel" class="form-control" value="{$resiModel['tel']}">
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <label class="control-label">备注:</label>
                <textarea class="form-control" id="m-reserve_remarks" rows="3" style="width:98%;">{$resiModel['remarks']}</textarea>
              </div>
            </div>

          </div>
          <div id="m-edit-addons">
            <div class="col-sm-12">
              <div class="form-group">
                <label>附件(上传身份证拍照啥的):</label>
                <div class="input-group" style="width: 98%;">
                  <input id="m-addons" class="form-control" type="text" value="{$resiModel['addons']}" readonly>
                  <div class="input-group-addon no-border no-padding"> <span>
                    <button type="button" id="plupload-addons" class="btn btn-danger plupload" data-input-id="m-addons" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="m-p-addons"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                    </span> </div>
                </div>
                <ul class="row list-inline plupload-preview" id="m-p-addons">
                </ul>
              </div>
            </div>
          </div>
          <div id="m-edit-date">
            <div class="col-sm-4">
              <div class="form-group">
                <label>入住时间:</label>
                <input type="text" id="m-check_in_time" class="form-control datetimepicker" value="{$resiModel['check_in_time_text']}">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>退房时间:</label>
                <input type="text" id="m-check_out_time" class="form-control datetimepicker" value="{$resiModel['check_out_time_text']}">
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <div id="m-edit-customer">
            <div id="toolbar" class="toolbar">
                <a href="javascript:;" class="btn btn-success" id="js_MAdd" title=" {:__('添加同住客人')}"><i class="fa fa-plus"></i> {:__('添加同住客人')}</a>
            </div>
            <table id="customer_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    </table>
            <input type="hidden" id="m-customer_data">
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label class="control-label">理由:</label>
              <textarea class="form-control" id="m-remarks" rows="3" style="width:98%;"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">确认提交</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal -->
<form id="customer-form" class="form-horizontal" role="customerform" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="mm-index">
    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="customerModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改客人信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">入住人姓名:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="mm-sex" style="width:60px;">
                                        <option value="1">先生</option>
                                        <option value="0">女士</option>
                                    </select>
                                </div>
                                <input class="form-control" type="text" id="mm-realname" style="width:94%;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">身份证:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select class="form-control operate" id="mm-certificates_type"  style="width:80px;">
                                        {volist name="certificatestypeList" id="item"}
                                        <option value="{$item['id']}">{$item['name']}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <input type="text" id="mm-person_no" class="form-control" value="" style="width:91%;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">出生日期:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group" style="width:95%;">
                                <input type="text" id="mm-birthday" class="form-control datetimepicker" data-date-format="YYYY-MM-DD">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" class="btn btn-info" id="js_getMBirthday"><i class="fa fa-eye"></i> {:__('取身份证')}</button></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">联系电话:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input id="mm-tel" class="form-control" type="text" value="">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="js_MSubmit">确定保存</button>
                </div>
            </div>
        </div>
    </div>
</form>